<template>
	<view class="reason-container">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="修改意见" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="reason-box" v-for="(it,ix) in list" :key="ix">
			<view class="title">
				修改意见 {{ix + 1}}
			</view>
			<view class="desc">
				{{it.title}}
			</view>
			<view class="title" v-if="it.images.length">
				相关截图 <text>{{it.images.length}}/3</text>
			</view>
			<view class="imgs display-flex">
				<image :src="item | formatImgUrl" class="fupic" mode="widthFix" v-for="item in it.images"
					@click="$common.previewImage(item,it.images)"></image>
			</view>
		</view>
		
		<!-- <view class="dibu" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view style="display: flex;justify-content: center;align-items: center;padding: 10rpx 0;">
				<view class="dili">
					<image :src="'/images/xieb.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="fatxt" >
						拒绝修改
					</view>
				</view>
				<view class="dilv" @click="$go('/pages/my/write')">
					<image :src="'/images/xiea.png' | formatImgUrl" class="dipic" mode=""></image>
					<view class="quetxt">
						同意修改
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				id: '',
				page: 1,
				list: []
			}
		},
		onLoad(e) {
			this.id = e.oid || ''
			this.page = 1
			this.getList()
			
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; 
				this.getList();
			}
		},
		methods:{
			getList(){
				this.$api.default.request('order/lookEditOrder', {
					oid: this.id,
					list: this.page
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.list = res.data.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.list.push(item)
							})
						} else {
							this.list = res.data.data
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}
	
	.reason-container{
		padding-bottom: calc(var(--window-bottom) + 50px);
	}
	
	.reason-box{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 10px;
		
		.title{
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
			margin-bottom: 10px;
			
			text{
				font-size: 12px;
				color: #999999;
				margin-left: 12rpx;
			}
		}
		
		.desc{
			margin-bottom: 10px;
			padding-bottom: 10px;
			font-family: '思源黑体';
			font-size: 12px;
			color: #999999;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
		}
		
		.imgs{
			flex-wrap: wrap;
			
			image{
				width: 200rpx;
				height: 200rpx;
				margin-right: 46rpx;
				
				&:nth-of-type(3n){
					margin-right: 0;
				}
			}
		}
	}
	
	.xuzhi {
		padding: 30rpx 60rpx;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 28rpx;
		color: #999999;
	}
	
	.dibu{
		position: fixed;
		left: 0;
		background-color: #ffffff;
		bottom: 0;
		width: 100%;
		// height: 100rpx;
		border-top: 1px solid rgba(153, 153, 153, 0.1);
		// display: flex;
		// align-items: center;
		// justify-content: center;
		.dili{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 330rpx;
			height: 60rpx;
			border-radius: 4px;
			box-sizing: border-box;
			border: 1px solid #3D3D3D;
			margin: 0 15rpx;
		}
		.dipic{
			width: 32rpx;
			height: 32rpx;
		}
		.fatxt{
			font-size: 24rpx;
			font-weight: normal;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-left: 8rpx;
		}
		.quetxt{
			font-size: 24rpx;
			font-weight: normal;
			letter-spacing: 0em;
			font-weight: bold;
			color: #ffffff;
			padding-left: 8rpx;
		}
		.dilv{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 330rpx;
			height: 60rpx;
			border-radius: 4px;
			border: 1px solid #45C4B0;
			background: #45C4B0;
			margin: 0 15rpx;
		}
	}
</style>